طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب
طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب
طراحی نمودار و گراف با کدها و ابزارهای جذاب برای صفحات وب
نمودارها و گراف ها نمایش گرافیکی از اطلاعات و ارقام هستند که به شیوه ای قابل درک سازماندهی شده و نشان دهنده مجموعه ای از داده های عددی یا کیفی به صورت کلی برای تجزیه و تحلیل می باشند انواع نمودارها مانند میله ای، خط شکسته و دایره ای در صفحات وب مورد استفاده قرار می گیرند. اگر شما نیز به طراحی وب مشغولید تا کنون شده از سر و کله زدن با طراحی نمودار های گنگ و غیر قابل فهم خسته شده باشید؟
تکنیکهایی در طراحی وب وجود دارند که تعداد تصاویر ثابت را کاهش داده و به ایجاد محتوای قابل دسترس بیشتر از نمودار ها و گراف ها کمک می نمایند. تکنیک هایی که از CSS ، پلاگین های jQuery و ابزارهای تولید آنلاین چارت استفاده می کنند، تنها برخی از کارهاییست که شما می توانید در زمینه خلق نمودار و گراف های خود انجام دهید.
مشکلات مرورگر یکی از نقطه ضعف های به کارگیری CCS است چرا که CCS در مرورگرهای مختلف به طرز یکسانی محتوا را نمایش نمی دهد. مثلا نسخه های قدیمی تر اینترنت اکسپلورر یا نت اسکیپ فقط یک صفحه ساده اچ تی ام ال را به کاربر نشان می دهند که به هیچ روی با صفحه زرق و برق دار نمایش داده شده در مرورگر های مدرنی مثل فایرفاکس یا نسخه های جدید نت اسکیپ قابل قیاس نیست.
پلاگین های jQuery ابزارهایی برای گسترش قابلیت های برنامه های کاربردی محسوب می گردند. این ها پلاگین های با نصب بسیار آسان هستند که سبب کاهش کار طراحی در زمینه برنامه نویسی می گردند. در ادامه به آشنایی مختصر با ۳ پلاگین jQuery محبوب و پرکاربرد برای نمودارها و گراف ها می پردازیم.(توضیحات بیشتر را با کلیک روی لینک هر مطلب می توانید خودتان مطالعه کنید.) مزایای استفاده از jQuery را می توان در مواردی همچون طراحی سبک و عدم نیاز به پهنای باند برای بارگذاری صفحات ، طراحی آسان و سریع ، نوشتن خطوط کمتر اما بدست اوردن توانمندی های بیشتر، سازگاری با مرورگر های مختلف، یکپارچگی آسان و مفید با برنامه های کاربردی و چند مورد مفید دیگر برشمرد.
Flot
Flot یک آرشیو خالص ترسیم نموداری جاوا اسکریپت برای jQuery است که به طراح کمک می کند به ترسیم نمودار هایی با ظاهر زیبا و از نوع کلاینت ایجاد کند. از ویژگی های آن می توان به سادگی در رابط کاربری، ویژگی هایی مانند زوم و ردیابی ماوس اشاره کرد ، اما محدودیت در ترسیم نمودارها از نقاط ضعف آن است.
- ایجاد نمودارها و ترسیمات گرافیکی
- بهره مندی از ویژگی های خاص : زوم و ردگیری نشانگر ماوس
- امکان استفاده ساده و آسان
- پشتیبانی از: اینترنت اکسپلورر نسخه های ۶،۷،۸ با تگ بوم HTML (راهنمای شبیه ساز جاوا اسکریپت excanvas برای اینترنت اکسپلورر استفاده می شود) ، فایرفاکس .x2 به بعد، سافاری .x3 به بعد ، اپرا ۹٫۵ به بالا و کانکرر .x4 به بالا.
ویژگی های اسپارک لاین شامل ترسیم انواع نمودار های خطی، میله ای ، بار و سه حالته (tristate) ، نمودار گسسته ، گراف گلوله ای ، گراف دایره ای، و پلات های جعبه ایست. این پلاگین توسط گَرِت واتز (Gareth Watts) نوشته شده است. همچنین نکته جالب دیگری که متوجه شدم این است که Sparklines را همچنین می توان مایکروسافت اکسل ۲۰۱۰ برای نشان دادن روند تمایل داده ها (data trends) مورد استفاده قرار داد.
- ایجاد نمودار های درون خطی کوچک
- امکان سفارشی سازی اندازه ها و رنگ های نمودار
- بهره مندی از تعداد فراوان سبک ها: نمودارهای های درون خطی، نمودار میله ای ، Tristate ، نمودار گسسته ، گراف جعبه ای ، نمودار دایره ای و نمودار گلوله ای.
- برخورداری از توابع اضافی: سرعت ماوس ، مقادیر منفی ، آستانه (threshold)
- پشتیبانی از : فایرفاکس ۲ به بالا، سافاری ۳ به بالا ، اپرا ۹ ، گوگل کروم و اینترنت اکسپلورر ۶ ، ۷ و ۸
- برخورداری از گزینه های متعدد سبک دهی به نمودارها و گرافها.
- محور تاریخ با قالب بندی قابل تنظیم.
- طراحی حداکثر ۹ محور Y.
- محور چرخش متن.
- محاسبه خودکار گرایشات خطوط در نمودارها.
- امکان افزودن نکات حاشیه نویسی (Tooltips و برجسته سازی و هایلایت نقاط.
- پیش فرض های مناسب برای سهولت استفاده.
- پشتیبانی از : اینترنت اکسپلورر ۶ ، ۷ و ۸ ، فایرفاکس ، سافاری و اپرا
- برخورداری از بسیاری از نیازهای اساسی طراح در هنگام خلق نمودار
- ارائه ۲۲ نمونه از محبوب ترین سبک های نمودارها مانند ستونی ، خطی ، دایره ای، میله ای ، مساحتی، انباشته، شمعدانی و نمودار قیفی ، که در تمام مرورگرها وب به یک شکل به نمایش در می اید.
- نمودارها و جداول تعاملی و پویا نما که به ظاهر برنامه های طراحی شده شما جلوه ای حرفه ای می بخشد.
- سازگاری با پی اچ پی، ASP.NET ، JSP ، ColdFusion ، پایتون، RoR ، صفحات HTML ساده و حتی فایل های پاورپوینت.
- همه نمودار ها می توانند اطلاعات مورد نیاز را از هر پایگاه داده استخراج کرده و از قابلیت AJAX برخوردار هستند.
- سبک های نموداری مختلف: دایره ای توپر و توخالی، خطی و سطحی، ستونی و میله ای و پراکنده و حبابی!
- قابلیت ترسیم نمودار ها و جداول به صورت دو بعدی یا سه بعدی.
- قابلیت استخراج داده ها از فایل های CSV و یا XML.
- توانایی خواندن اطلاعات نوشته شده با پی اچ پی ، دات نت ، جاوا ، Ruby on Rails ، پرل ، ColdFusion ، و بسیاری زبان های برنامه نویسی دیگر.
- سازگاری با انواع سیستم عامل ها و انواع مرورگرهای وب.
- توانایی ترسیم نمودار های دایره ای، میله ای ، خطی ، شمعدان مانند، سطحی، ستونی ، حبابی، منحنی، نقطه / مارکر ، پراکنده ، جداول شمعدان مانند و حلقه ای.
- سازگاری کامل با ASP.NET ، ASP ، PHP ، JSP ، ColdFusion ، Ruby on Rails ، صفحات HTML ساده و همچنین فایل های پاورپوینت .
- قابلیت طراحی و خلق سریع نمودارها و گرافها از داده های استاتیک و یا پویا (با هر زبان برنامه نویسی صفحات وب)
- قابلیت به روز رسانی کامل و جریان داده ها بدون نیاز به بارگذاری مجدد صفحه وب.
- پیمایش تعاملی (هر تعداد از دادهها و اطلاعات )، امکان زوم برای دریافت اطلاعات تکمیلی، چرخش سه بعدی نمودار، توانایی قرار دادن پیوند ها، راهنمایی ها ، برچسب ها ، و غیره
- انتقال بین تصاویر (transitions) با جلوه پویا و انیمیشن و افکت های فلش با کیفیت گرافیکی بالا ، از جمله توانایی اعمال افکت های آنتی الایز ، شفاف سازی (ترنسپرنت) ، سایه دار ، برجسته ، تلالو دار ، و بلور کردن فونت ها.
- حالت تمام صفحه ، نمودار های مقیاس پذیر ، قابلیت چاپ نمودارها ، و خروجی گرفتن از انها به فرمت بیت مپ.
- قابل استفاده در برنامه های کاربردی فلش ، برنامه های کاربردی وب و با پشتیبانی از ارتباطات جاوا اسکریپتی.
- پشتیبانی از متن یونیکد برای نمایش کاراکترهای خاص و زبان های مختلف.
- برخورداری از طیف متنوعی از انواع نمودارها.
در ادامه مقاله به معرفی برخی از ابزارهای کاربردی و آنلاین طراحی نمودار ها و جداول می پردازیم:
منبع:مجله اينترنتي گوياآيتي
ارسال توسط کاربر محترم سایت :omid_a98
تکنیکهایی در طراحی وب وجود دارند که تعداد تصاویر ثابت را کاهش داده و به ایجاد محتوای قابل دسترس بیشتر از نمودار ها و گراف ها کمک می نمایند. تکنیک هایی که از CSS ، پلاگین های jQuery و ابزارهای تولید آنلاین چارت استفاده می کنند، تنها برخی از کارهاییست که شما می توانید در زمینه خلق نمودار و گراف های خود انجام دهید.
۱- طراحی نمودارها و جداول با CSS
مشکلات مرورگر یکی از نقطه ضعف های به کارگیری CCS است چرا که CCS در مرورگرهای مختلف به طرز یکسانی محتوا را نمایش نمی دهد. مثلا نسخه های قدیمی تر اینترنت اکسپلورر یا نت اسکیپ فقط یک صفحه ساده اچ تی ام ال را به کاربر نشان می دهند که به هیچ روی با صفحه زرق و برق دار نمایش داده شده در مرورگر های مدرنی مثل فایرفاکس یا نسخه های جدید نت اسکیپ قابل قیاس نیست.
نمودار میله ای عمودی با CSS
نمودار خط شکسته با CSS
نمودار میله ای تجمعی با CSS
ایجاد نمودار دایره ای با CSS3
گراف میله ای پیچیده با CSS
۲- پلاگین های jQuery برای نمودارها و گرافها
پلاگین های jQuery ابزارهایی برای گسترش قابلیت های برنامه های کاربردی محسوب می گردند. این ها پلاگین های با نصب بسیار آسان هستند که سبب کاهش کار طراحی در زمینه برنامه نویسی می گردند. در ادامه به آشنایی مختصر با ۳ پلاگین jQuery محبوب و پرکاربرد برای نمودارها و گراف ها می پردازیم.(توضیحات بیشتر را با کلیک روی لینک هر مطلب می توانید خودتان مطالعه کنید.) مزایای استفاده از jQuery را می توان در مواردی همچون طراحی سبک و عدم نیاز به پهنای باند برای بارگذاری صفحات ، طراحی آسان و سریع ، نوشتن خطوط کمتر اما بدست اوردن توانمندی های بیشتر، سازگاری با مرورگر های مختلف، یکپارچگی آسان و مفید با برنامه های کاربردی و چند مورد مفید دیگر برشمرد.
Flot
Flot یک آرشیو خالص ترسیم نموداری جاوا اسکریپت برای jQuery است که به طراح کمک می کند به ترسیم نمودار هایی با ظاهر زیبا و از نوع کلاینت ایجاد کند. از ویژگی های آن می توان به سادگی در رابط کاربری، ویژگی هایی مانند زوم و ردیابی ماوس اشاره کرد ، اما محدودیت در ترسیم نمودارها از نقاط ضعف آن است.
- ایجاد نمودارها و ترسیمات گرافیکی
- بهره مندی از ویژگی های خاص : زوم و ردگیری نشانگر ماوس
- امکان استفاده ساده و آسان
- پشتیبانی از: اینترنت اکسپلورر نسخه های ۶،۷،۸ با تگ بوم HTML (راهنمای شبیه ساز جاوا اسکریپت excanvas برای اینترنت اکسپلورر استفاده می شود) ، فایرفاکس .x2 به بعد، سافاری .x3 به بعد ، اپرا ۹٫۵ به بالا و کانکرر .x4 به بالا.
jQuery Sparklines
ویژگی های اسپارک لاین شامل ترسیم انواع نمودار های خطی، میله ای ، بار و سه حالته (tristate) ، نمودار گسسته ، گراف گلوله ای ، گراف دایره ای، و پلات های جعبه ایست. این پلاگین توسط گَرِت واتز (Gareth Watts) نوشته شده است. همچنین نکته جالب دیگری که متوجه شدم این است که Sparklines را همچنین می توان مایکروسافت اکسل ۲۰۱۰ برای نشان دادن روند تمایل داده ها (data trends) مورد استفاده قرار داد.
- ایجاد نمودار های درون خطی کوچک
- امکان سفارشی سازی اندازه ها و رنگ های نمودار
- بهره مندی از تعداد فراوان سبک ها: نمودارهای های درون خطی، نمودار میله ای ، Tristate ، نمودار گسسته ، گراف جعبه ای ، نمودار دایره ای و نمودار گلوله ای.
- برخورداری از توابع اضافی: سرعت ماوس ، مقادیر منفی ، آستانه (threshold)
- پشتیبانی از : فایرفاکس ۲ به بالا، سافاری ۳ به بالا ، اپرا ۹ ، گوگل کروم و اینترنت اکسپلورر ۶ ، ۷ و ۸
jqPlot
- برخورداری از گزینه های متعدد سبک دهی به نمودارها و گرافها.
- محور تاریخ با قالب بندی قابل تنظیم.
- طراحی حداکثر ۹ محور Y.
- محور چرخش متن.
- محاسبه خودکار گرایشات خطوط در نمودارها.
- امکان افزودن نکات حاشیه نویسی (Tooltips و برجسته سازی و هایلایت نقاط.
- پیش فرض های مناسب برای سهولت استفاده.
- پشتیبانی از : اینترنت اکسپلورر ۶ ، ۷ و ۸ ، فایرفاکس ، سافاری و اپرا
۳- نمودارها و گراف های مبتنی بر فلش
Fusion Chart Free
- برخورداری از بسیاری از نیازهای اساسی طراح در هنگام خلق نمودار
- ارائه ۲۲ نمونه از محبوب ترین سبک های نمودارها مانند ستونی ، خطی ، دایره ای، میله ای ، مساحتی، انباشته، شمعدانی و نمودار قیفی ، که در تمام مرورگرها وب به یک شکل به نمایش در می اید.
- نمودارها و جداول تعاملی و پویا نما که به ظاهر برنامه های طراحی شده شما جلوه ای حرفه ای می بخشد.
- سازگاری با پی اچ پی، ASP.NET ، JSP ، ColdFusion ، پایتون، RoR ، صفحات HTML ساده و حتی فایل های پاورپوینت.
- همه نمودار ها می توانند اطلاعات مورد نیاز را از هر پایگاه داده استخراج کرده و از قابلیت AJAX برخوردار هستند.
amCharts
- سبک های نموداری مختلف: دایره ای توپر و توخالی، خطی و سطحی، ستونی و میله ای و پراکنده و حبابی!
- قابلیت ترسیم نمودار ها و جداول به صورت دو بعدی یا سه بعدی.
- قابلیت استخراج داده ها از فایل های CSV و یا XML.
- توانایی خواندن اطلاعات نوشته شده با پی اچ پی ، دات نت ، جاوا ، Ruby on Rails ، پرل ، ColdFusion ، و بسیاری زبان های برنامه نویسی دیگر.
AnyChart
- سازگاری با انواع سیستم عامل ها و انواع مرورگرهای وب.
- توانایی ترسیم نمودار های دایره ای، میله ای ، خطی ، شمعدان مانند، سطحی، ستونی ، حبابی، منحنی، نقطه / مارکر ، پراکنده ، جداول شمعدان مانند و حلقه ای.
- سازگاری کامل با ASP.NET ، ASP ، PHP ، JSP ، ColdFusion ، Ruby on Rails ، صفحات HTML ساده و همچنین فایل های پاورپوینت .
XML/SWF Charts
- قابلیت طراحی و خلق سریع نمودارها و گرافها از داده های استاتیک و یا پویا (با هر زبان برنامه نویسی صفحات وب)
- قابلیت به روز رسانی کامل و جریان داده ها بدون نیاز به بارگذاری مجدد صفحه وب.
- پیمایش تعاملی (هر تعداد از دادهها و اطلاعات )، امکان زوم برای دریافت اطلاعات تکمیلی، چرخش سه بعدی نمودار، توانایی قرار دادن پیوند ها، راهنمایی ها ، برچسب ها ، و غیره
- انتقال بین تصاویر (transitions) با جلوه پویا و انیمیشن و افکت های فلش با کیفیت گرافیکی بالا ، از جمله توانایی اعمال افکت های آنتی الایز ، شفاف سازی (ترنسپرنت) ، سایه دار ، برجسته ، تلالو دار ، و بلور کردن فونت ها.
- حالت تمام صفحه ، نمودار های مقیاس پذیر ، قابلیت چاپ نمودارها ، و خروجی گرفتن از انها به فرمت بیت مپ.
- قابل استفاده در برنامه های کاربردی فلش ، برنامه های کاربردی وب و با پشتیبانی از ارتباطات جاوا اسکریپتی.
- پشتیبانی از متن یونیکد برای نمایش کاراکترهای خاص و زبان های مختلف.
- برخورداری از طیف متنوعی از انواع نمودارها.
۴-ابزارهای انلاین طراحی نمودارها و جداول
در ادامه مقاله به معرفی برخی از ابزارهای کاربردی و آنلاین طراحی نمودار ها و جداول می پردازیم:
Max’s Chart
DIY Chart
Kid’s Zone
Onlinecharttool
Highcharts
Google Chart Generator
سخن پایانی
منبع:مجله اينترنتي گوياآيتي
ارسال توسط کاربر محترم سایت :omid_a98
/ج
تازه های مقالات
ارسال نظر
در ارسال نظر شما خطایی رخ داده است
کاربر گرامی، ضمن تشکر از شما نظر شما با موفقیت ثبت گردید. و پس از تائید در فهرست نظرات نمایش داده می شود
نام :
ایمیل :
نظرات کاربران
{{Fullname}} {{Creationdate}}
{{Body}}